<template>
      <el-col :md="14" :sm="20" :xs="20" class="submit-box">
            <el-col :span="24" class="submit">{{title}}</el-col>
      </el-col>
</template>

<script>
export default {
      props: ['title'],
      data() {
            return {
                
            }
      },
};
</script>

<style lang="less">
      .submit-box{
            position: relative;
            padding: 5px;
            cursor:pointer;
      }
      .submit{
            height: 50px;
            line-height: 50px;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            border-radius: 30px;
            background-size: 400%;
            font-size: 22px;
            text-transform: uppercase;
            color: white;
            animation:animate 8s linear infinite;
      }
      @keyframes animate {
            0%{
                  background-position: 0%;
            }
            100%{
                  background-position: 400%;
            }
      }
      .submit::before{
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            border-radius: 40px;
            background-size: 400%;
            opacity: -1;
            transition: 0.5s;
      }
      .submit:hover::before{
            filter: blur(20px);
            opacity: 1;
      }
</style>